<template>
  <div>
    <el-upload
      ref="upload"
      action="http://127.0.0.1:3000/upload"
      list-type="picture-card"
      :auto-upload="false"
      multiple
      :file-list="fileList"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-upload>
    <el-button
      style="margin-left: 10px"
      size="small"
      type="success"
      @click="submitUpload()"
      >上传到服务器</el-button
    >
    <el-button
      type="text"
      @click="dialogVisible = true"
      v-show="resListSql != 0"
      >查看截图预览</el-button
    >

    <!-- 取消了lazy 流量会爆增 -->
    <el-dialog title="编号" :visible.sync="dialogVisible" width="70%">
      <el-image
        v-for="url in resListSql"
        :key="url"
        :src="`${url}`"
        class="demo-image__lazy"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 自减用,用于全部减完以后提示
      fileList: [],
      // 返回数据的数据
      resList: [],
      // 处理好 响应可以上传的数据
      resListSql: [],
      sizeList: [],

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    //清除 覆盖
    cover() {
      this.resListSql = [];
    },

    // 上传前钩子,获取上传前的数据
    beforeUpload(file) {
      this.sizeList.push(file.size);
      console.log(this.sizeList);
      this.cover();
    },
    //res 是上传后的返回数据
    //file 是当前图片信息
    //fileList 是图片数组对象
    handleSuccess1(res, file, fileList) {
      console.log(res);
      console.log(file);
      console.log(fileList);
      //赋值现在的数据给data的fileList
      this.fileList = fileList;
      //把每个图片上传成功后的数据(文件名,文件大小size)放进resList存进数据库
      this.resList.unshift(res);
      //获取这次上传的图片数据在数组里的位置
      let index = this.fileList.indexOf(file);
      // 上传成功,删除该张图片的数据
      this.fileList.splice(index, 1);
      // 删到最后一个的时候提示上传成功
      if (this.fileList.length === 0) {
        //把获取到的相应数据放回待上传到数据库的变量中
        this.$message.success(`上传成功,共上传了${this.resList.length}张图片`);
        // 正确顺序的列表
        console.log(this.resList);
        this.sizeList.forEach((itme) => {
          for (let i = 0; i < this.resList.length; i++) {
            if (itme == this.resList[i][0].size) {
              this.resListSql.push(`${this.resList[i][0].url}`);
            }
          }
        });
        //清空数据
        this.resList = [];
        this.sizeList = [];
      }
    },
    handleRemove(file) {
      console.log(file);
      console.log(this.fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style>
.demo-image__lazy {
  /* overflow: scroll; */
  width: 1300px;
  height: 700px;
}
</style>